<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/layui/css/layui.css">
    <script th:src="${iconfontUrl}"></script>

    <style>
        .box{padding: 10px;border: 2px solid rgb(222,222,222);line-height: 30px;border-top: none;
            border-left: none;border-right: none;
            font-size: 18px;
            margin-top: 10px;
            transition:border-bottom 2s;
        }
        .box input{color: #333;}
        .box i{color: gray}
        .box:hover  {
            border-bottom: 2px solid cornflowerblue;
        }

        .box:hover > i {
            color: blueviolet;;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 14px;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            font-size: 14px;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            font-size: 14px;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            font-size: 14px;
        }


        .box1{margin-top: 50px;}
        .box2{float: left;width: 63%;}
        .box-c-r{float: right;width: 20%;line-height: 30px;padding:20px 10px;margin-top: 10px;}
        #getValCode{color: blue;}
        #modify,#tip{width: 100%;margin-top: 20px;}
        #tip{display: none;font-size: 24px;}

        /*小屏幕 1366 x 768*/
        @media screen and (max-width: 1366px) {
            .box-c-r{width: 22%;}
        }
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div style="margin:-10px  80px;padding: 0 30px;">
    <div>
        <div class="box box1">
            <svg class="icon" style="font-size: 20px;color: gray;" aria-hidden="true"><use xlink:href="#layui-extend-email1"></use></svg>
            <input name="email" type="text" placeholder=" 请输入电子邮箱" style="width: 80%;height: 30px;border: none;">
        </div>

        <div>
            <div class="box box2">
                <i style="font-size: 24px;"  class="layui-icon layui-icon-vercode"></i>
                <input name="valCode" type="text" placeholder=" 请输入动态码" style="width: 80%;height: 30px;border: none;">
            </div>
            <div class="box-c-r">
                <a href="javascript:;" id="getValCode">获取动态码</a>
                <span href="javascript:;" id="tip"><span id="time">120</span> S</span>
            </div>
        </div>
        <div class="box" style="clear: both;">
            <i style="font-size: 24px;" class="layui-icon layui-icon-password"></i>
            <input name="password" type="password" placeholder=" 请输入新密码" style="width: 80%;height: 30px;border: none;">
        </div>
        <div class="layui-btn layui-btn-normal" id="modify">
            立即修改
        </div>
    </div>
</div>

<script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
<script>
    layui.use(['layer'],function () {
        var layer=layui.layer,
            $=layui.jquery;

        $("input[name=email]").blur(function () {
            checkEmail();
        });
        /**
         * 获取验证码
         * */
        $("#getValCode").click(function () {
            if(checkEmail()){
                //发送动态码业务
                layer.msg("动态码已发出，请查看邮箱！");
                $.ajax({
                    url:"/login/sendEmail",
                    type:"POST",
                    data:{"email":$("input[name=email]").val()},
                    success:function (e) {
                        //接受动态码
                        if(!e.success){layer.alert("邮件发送失败！")}
                    },dataType:"json"
                });
                $("#getValCode").hide();
                $("#tip").show();
                var timer = setInterval(function () {
                    var number = parseInt($("#time").html());
                    $("#time").html(String(--number));
                    if(number == 1){
                        clearInterval(timer);
                        $("#getValCode").show();
                        $("#tip").hide();
                        $("#time").html("120");
                    }
                },1000);
            }
        });

        /**
         * 注册
         * */
        $("#modify").click(function () {
            if(checkEmail() && checkPassword() && checkValCode()){ //验证通过
                var email =  $("input[name=email]").val();
                var password =  $("input[name=password]").val();
                $.ajax({
                    url:"/login/saveModifyPassword",
                    type:"POST",
                    data:{"email":email,"password":password},
                    success:function (e) {
                        if(e.success){
                            $.ajax({
                                url:"/login/check",
                                type:"POST",
                                data:{"email":email,"password":password},
                                success:function (e) {
                                    window.parent.location.href='/'
                                },dataType:"json"
                            });
                        }else{
                            layer.msg(e.message);
                        }
                    },dataType:"json"
                });
            }
        });

        /**
         * 检查邮箱
         * */
        function checkEmail() {
            var flag=false;
            var email =  $("input[name=email]").val();
            var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if(!emailReg.test(email)){
                layer.msg("请输入正确的邮箱地址！");
                return false;
            }
            $.ajax({
                url:"/login/checkEmail",
                type:"POST",
                async:false,
                data:{"email":email},
                success:function (e) {
                    if(!(flag=e.success)){
                        layer.msg("用户不存在！");
                    }
                },dataType:"json"
            });
            return flag;
        }
        /**
         * 检查密码
         * */
        function checkPassword() {
            var password =  $("input[name=password]").val();
            var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
            if(password == ""){
                layer.msg("请输入密码");
                return false;
            }else if(!reg.test(password) || password.length < 6){
                layer.msg("密码长度至少为6位，且包含字母和数字");
                return false;
            }
            return true;
        }
        /**
         * 检查验证码
         * */
        function checkValCode() {
            var code = $("input[name=valCode]").val();
            if(code == ""){
                layer.msg("请输入动态码");
                return false;
            }
            var flag=false;
            $.ajax({
                url:"/login/checkValCode",
                type:"POST",
                async:false,
                data:{"valCode":code},
                success:function (e) {
                    if(e.success){
                        flag=true;
                    }else{
                        alert(e.message)
                    }
                },dataType:"json"
            });
            return flag;
        }
    });
</script>
</body>
</html>